<template>
  <div class="dormitory-manage">
    <div class="header">
      <router-link to="/main/wuye/dormitory/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>日常管理</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="住宿信息" name="info">
          <div class="search-bar">
            <el-form :inline="true" :model="searchForm">
              <el-form-item label="宿舍号">
                <el-input v-model="searchForm.roomNo" placeholder="请输入宿舍号"></el-input>
              </el-form-item>
              <el-form-item label="入住人">
                <el-input v-model="searchForm.resident" placeholder="请输入入住人"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="resetSearch">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="roomList" style="width: 100%">
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="roomType" label="宿舍类型" width="120"></el-table-column>
            <el-table-column prop="residents" label="入住人员" width="200">
              <template slot-scope="scope">
                <el-tag v-for="(resident, index) in scope.row.residents" 
                  :key="index" size="small" style="margin-right: 5px">
                  {{ resident }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="waterMeter" label="水表读数" width="120">
              <template slot-scope="scope">
                {{ scope.row.waterMeter }}立方米
              </template>
            </el-table-column>
            <el-table-column prop="electricityMeter" label="电表读数" width="120">
              <template slot-scope="scope">
                {{ scope.row.electricityMeter }}度
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="updateMeters(scope.row)">抄表</el-button>
                <el-button size="mini" type="warning" @click="recordIssue(scope.row)">记录问题</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="卫生检查" name="inspection">
          <el-table :data="inspectionList" style="width: 100%">
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="inspectionTime" label="检查时间" width="180"></el-table-column>
            <el-table-column prop="inspector" label="检查人" width="120"></el-table-column>
            <el-table-column prop="score" label="评分" width="120">
              <template slot-scope="scope">
                <el-rate v-model="scope.row.score" disabled :max="5"></el-rate>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.score >= 4 ? 'success' : 'warning'">
                  {{ scope.row.score >= 4 ? '良好' : '需改进' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewInspection(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="addInspection(scope.row)">新增检查</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="维修记录" name="maintenance">
          <el-table :data="maintenanceList" style="width: 100%">
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="reportTime" label="报修时间" width="180"></el-table-column>
            <el-table-column prop="issueType" label="问题类型" width="120"></el-table-column>
            <el-table-column prop="description" label="问题描述" width="200"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewMaintenance(scope.row)">查看</el-button>
                <el-button size="mini" type="success" 
                  v-if="scope.row.status === '待处理'"
                  @click="handleMaintenance(scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 抄表对话框 -->
    <el-dialog title="水电抄表" :visible.sync="meterDialogVisible" width="40%">
      <el-form :model="meterForm" label-width="100px">
        <el-form-item label="水表读数">
          <el-input-number v-model="meterForm.waterMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">立方米</span>
        </el-form-item>
        <el-form-item label="电表读数">
          <el-input-number v-model="meterForm.electricityMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">度</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="meterForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="meterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMeterReading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 问题记录对话框 -->
    <el-dialog title="记录问题" :visible.sync="issueDialogVisible" width="50%">
      <el-form :model="issueForm" label-width="100px">
        <el-form-item label="问题类型">
          <el-select v-model="issueForm.type">
            <el-option label="设施损坏" value="设施损坏"></el-option>
            <el-option label="卫生问题" value="卫生问题"></el-option>
            <el-option label="安全隐患" value="安全隐患"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="issueForm.description" rows="4"></el-input>
        </el-form-item>
        <el-form-item label="处理建议">
          <el-input type="textarea" v-model="issueForm.suggestion" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="issueDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitIssue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'info',
      searchForm: {
        roomNo: '',
        resident: ''
      },
      roomList: [],
      inspectionList: [],
      maintenanceList: [],
      meterDialogVisible: false,
      issueDialogVisible: false,
      currentRoom: null,
      meterForm: {
        waterMeter: 0,
        electricityMeter: 0,
        remark: ''
      },
      issueForm: {
        type: '',
        description: '',
        suggestion: ''
      }
    }
  },
  created() {
    // TODO: 从后端获取数据
    this.roomList = [
      {
        roomNo: '101',
        roomType: '双人间',
        residents: ['张三', '李四'],
        waterMeter: 123.45,
        electricityMeter: 456.78
      }
    ]
  },
  methods: {
    handleSearch() {
      // TODO: 实现搜索功能
    },
    resetSearch() {
      this.searchForm = {
        roomNo: '',
        resident: ''
      }
    },
    viewDetail(row) {
      // TODO: 查看详情
    },
    updateMeters(row) {
      this.currentRoom = row
      this.meterForm = {
        waterMeter: row.waterMeter,
        electricityMeter: row.electricityMeter,
        remark: ''
      }
      this.meterDialogVisible = true
    },
    recordIssue(row) {
      this.currentRoom = row
      this.issueForm = {
        type: '',
        description: '',
        suggestion: ''
      }
      this.issueDialogVisible = true
    },
    submitMeterReading() {
      // TODO: 提交抄表数据
      this.currentRoom.waterMeter = this.meterForm.waterMeter
      this.currentRoom.electricityMeter = this.meterForm.electricityMeter
      this.$message.success('抄表记录已保存')
      this.meterDialogVisible = false
    },
    submitIssue() {
      if (!this.issueForm.type || !this.issueForm.description) {
        this.$message.error('请填写完整的问题信息')
        return
      }
      // TODO: 提交问题记录
      this.$message.success('问题记录已保存')
      this.issueDialogVisible = false
    },
    getStatusType(status) {
      const typeMap = {
        '待处理': 'warning',
        '处理中': 'primary',
        '已完成': 'success'
      }
      return typeMap[status] || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-manage {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .search-bar {
    margin-bottom: 20px;
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style> 